import React, { useState } from 'react'
import { Space, Table, Pagination, Button, Input, Select, Tag, Collapse, Image, Row } from 'antd';
import {
  DownOutlined
} from '@ant-design/icons';
const getRowClassName = (record, index) => {
  let className = '';
  className = index % 2 === 0 ? "oddRow" : "evenRow";
  return className
}

const columns = [
  {
    title: '地市',
    dataIndex: 'city',
    key: 'city',
    align: "center",
    fixed: "left",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '卡号',
    dataIndex: 'cardNumber',
    key: 'cardNumber',
    align: "center",
    fixed: "left",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '卡类型',
    dataIndex: 'cardType',
    key: 'cardType',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: '运营商',
    dataIndex: 'operator',
    key: 'operator',
    align: "center",
    render: (text) => {
      return <span style={{ fontSize: "12px" }}>{text}</span>
    }
  },
  {
    title: "卡状态",
    dataIndex: 'cardState',
    key: 'cardState',
    align: "center",
    render: (text) => {
      return <Tag color='cyan'>{text}</Tag>
    }
  },
  {
    title: "卡网络状态",
    dataIndex: 'networkState',
    key: 'networkState',
    align: "center",
    className: "wrapTitle",
    render: (text) => {
      return <Tag color='cyan'>{text}</Tag>
    }
  },
  {
    title: "上月流量是否超限",
    dataIndex: 'isOverrun',
    key: 'isOverrun',
    align: "center",
    className: "wrapTitle",
    render: (text) => {
      return <span style={{ fontSize: "12px", color: "red" }}>{text}</span>
    }
  },
  {
    title: "上月是否停机",
    dataIndex: 'isHalt',
    key: 'isHalt',
    align: "center",
    className: "wrapTitle",
    render: (text) => {
      return <span style={{ fontSize: "12px", color: "red" }}>{text}</span>
    }
  },
  {
    title: '操作',
    dataIndex: 'operate',
    key: 'operate',
    fixed: 'right',
    align: "center",
    render: (text, item) => {
      return <Space>
        <a style={{ fontSize: "12px", }} >流量详情</a>
      </Space>
    }
  },
];
const data = [
  {
    key: '1',
    city: "福州市",
    cardNumber: '12731293812312',
    cardType: "物联网卡",
    operator: "中国移动",
    cardState: "正常",
    networkState: "在线",
    isOverrun: "是",
    isHalt: "是"
  },
  {
    key: '2',
    city: "福州市",
    cardNumber: '12731293812312',
    cardType: "物联网卡",
    operator: "中国移动",
    cardState: "正常",
    networkState: "在线",
    isOverrun: "是",
    isHalt: "是"
  },
  {
    key: '3',
    city: "福州市",
    cardNumber: '12731293812312',
    cardType: "物联网卡",
    operator: "中国移动",
    cardState: "正常",
    networkState: "在线",
    isOverrun: "是",
    isHalt: "是"
  },
  {
    key: '4',
    city: "福州市",
    cardNumber: '12731293812312',
    cardType: "物联网卡",
    operator: "中国移动",
    cardState: "正常",
    networkState: "在线",
    isOverrun: "是",
    isHalt: "是"
  },
  {
    key: '5',
    city: "福州市",
    cardNumber: '12731293812312',
    cardType: "物联网卡",
    operator: "中国移动",
    cardState: "正常",
    networkState: "在线",
    isOverrun: "是",
    isHalt: "是"
  },
  {
    key: '6',
    city: "福州市",
    cardNumber: '12731293812312',
    cardType: "物联网卡",
    operator: "中国移动",
    cardState: "正常",
    networkState: "在线",
    isOverrun: "是",
    isHalt: "是"
  },
  {
    key: '7',
    city: "福州市",
    cardNumber: '12731293812312',
    cardType: "物联网卡",
    operator: "中国移动",
    cardState: "正常",
    networkState: "在线",
    isOverrun: "是",
    isHalt: "是"
  },
  {
    key: '8',
    city: "福州市",
    cardNumber: '12731293812312',
    cardType: "物联网卡",
    operator: "中国移动",
    cardState: "正常",
    networkState: "在线",
    isOverrun: "是",
    isHalt: "是"
  },
  {
    key: '9',
    city: "福州市",
    cardNumber: '12731293812312',
    cardType: "物联网卡",
    operator: "中国移动",
    cardState: "正常",
    networkState: "在线",
    isOverrun: "是",
    isHalt: "是"
  },
  {
    key: '10',
    city: "福州市",
    cardNumber: '12731293812312',
    cardType: "物联网卡",
    operator: "中国移动",
    cardState: "正常",
    networkState: "在线",
    isOverrun: "是",
    isHalt: "是"
  },
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};
export default function CardMonitor(props) {
  const [fileList, setFileList] = useState([]);
  const [selectionType, setSelectionType] = useState('checkbox');
  const items = [
    {
      key: '1',
      label: <Space style={{ fontSize: '12px' }} size={35}>
        <div>
          所属地市
          <Select
            defaultValue="福州市"
            className='inputValue'
            dropdownStyle={{ fontSize: "7px" }}
            options={[
              {
                value: '福州市',
                label: '福州市',
              },

            ]}
          />
        </div>
        <div>
          卡号<Input placeholder="请输入" className='inputValue' />
        </div>
        <div>
          卡类型<Select
            defaultValue="全部"
            className='inputValue'
            options={[
              {
                value: '全部',
                label: '全部',
              },
            ]}
          />
        </div>

        <div>
          运营商<Select
            defaultValue="全部"
            className='inputValue'
            options={[
              {
                value: '全部',
                label: '全部',
              },
            ]}
          />
        </div>
      </Space>,
      children:
        <Space style={{ fontSize: "12px" }} size={35}>
          <div>
            任务编号<Input placeholder="请输入" className='inputValue' />
          </div>
          <div>
            设备标识<Input placeholder="请输入" className='inputValue' />
          </div>
          <div>
            发起人<Input placeholder="请输入" className='inputValue' />
          </div>
          <div>
            所属地市
            <Select
              defaultValue="福州市"
              className='inputValue'
              disabled
              options={[
                {
                  value: '福州市',
                  label: '福州市',
                },
              ]}
              style={{ height: '30px', fontSize: "12px" }}
            />
          </div>
        </Space>,
    },
  ];
  const expandIcon = (e) => {
    return <DownOutlined />
  }
  return (
    <div style={{
      padding: "0 15px 10px 15px", fontSize: "12px", background: "white", borderRadius: "5px", minHeight: "530px",
      // height: document.documentElement.clientHeight - 135
    }}>
      <div style={{ display: 'flex' }}>
        <Collapse items={items} bordered={false} expandIconPosition="end" expandIcon={(e) => expandIcon(e)} collapsible="icon" style={{ flex: "1 1 900px", background: "white" }} />
        <div style={{ width: "198px", padding: "12px 0 0 0", textAlign: "right" }}>
          <Button style={{ color: "white", background: "#1FBBA9", fontSize: "12px", borderRadius: "4px" }}>查询</Button>
          <Button style={{ color: "black", fontSize: "12px", borderRadius: "4px", margin: "0 0 0 10px" }}>重置</Button>
          <Button style={{ color: "black", fontSize: "12px", borderRadius: "4px", margin: "0 0 0 10px" }}>导出</Button>
        </div>

      </div>

      <Table
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        rowClassName={(record, index) => getRowClassName(record, index)}
        columns={columns} dataSource={data} style={{ border: "1px solid #c9cacac7", margin: "5px 0 0 0" }}
        pagination={false}
        size='small'
      >
      </Table>
      <Pagination
        total={100}
        showTotal={(total) => `共 ${total} 条记录 第1~${total > 9 ? 10 : total} 条`}
        defaultCurrent={1}
        showSizeChanger={false}
        style={{ margin: "10px 0 0 0", fontSize: "12px" }}
      />

    </div>
  )
}
